<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
      <div>
        <vxe-toolbar>
          <template v-slot:buttons>
            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
            <vxe-button @click="addType()">添加</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          resizable
          border
          ref="xTree"
          row-id="id"
          show-overflow="tooltip"
          highlight-hover-row
          align="center"
          header-align="center"
          :data.sync="tableData"
          :tree-config="{children: 'children', expandAll: true, line: true}">
          <vxe-table-column field="label" title="标签名" tree-node></vxe-table-column>
          <vxe-table-column field="parent_id" title="父级编号"></vxe-table-column>
          <vxe-table-column field="value" title="数据值"></vxe-table-column>
          <vxe-table-column field="type" title="类型"></vxe-table-column>
          <vxe-table-column min-width="20%" title="操作">
            <template v-slot="{ row }">
              <Button size="small" class="actionBtn" type="primary" v-if="row.type!=2" @click="add(row)">添加下级
              </Button>
              <Button size="small" class="actionBtn" type="info" @click="update(row)">修改</Button>
              <Button size="small" class="actionBtn" type="error" @click="remove(row)">删除</Button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
      <Modal
        v-model="infoModal.show"
        :title="infoModal.title"
        @on-ok="addOk">
        <template>
          <Form :model="formItem" :label-width="80">
            <FormItem label="上级:">
              <Select v-model="formItem.parent_id" filterable>
                  <Option v-for="(item,index) in list" :value="item.id" :key="index">{{item.label}}</Option>
              </Select>
            </FormItem>
            <FormItem label="标签名:">
              <Input v-model="formItem.label" placeholder="标签名"></Input>
            </FormItem>
            <FormItem label="数据值：">
              <Input v-model="formItem.value"   placeholder="数据值"></Input>
            </FormItem>
            <FormItem label="类型：">
              <Input v-model="formItem.type"  placeholder="类型"></Input>
            </FormItem>
            <FormItem label="描述:">
              <Input v-model="formItem.description" placeholder="描述"></Input>
            </FormItem>
          </Form>
        </template>
      </Modal>
      <Modal
        v-model="deleteModal"
        title="删除"
        @on-ok="deleteOk">
        是否确认删除？
      </Modal>
    </div>
</template>

<script>
import { findDictList, DictList, saveDict, updateDict, deleteDict } from '@/api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      tableData: [],
      row: {},
      infoModal: {
        title: '',
        show: false,
        info: {}
      },
      formItem: {},
      list: [],
      deleteModal: false
    }
  },
  methods: {
    addOk () {
      if (this.infoModal.title === '新增') {
        let data = {
          label: this.formItem.label,
          value: this.formItem.value,
          type: this.formItem.type,
          description: this.formItem.description,
          parent_id: this.formItem.parent_id
        }
        if (data.parent_id === undefined) {
          data.parent_id = 0
        }
        saveDict(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.init()
          } else {
            this.$Notice.error({
              title: '新增失败',
              desc: ret.data.errmsg
            })
          }
        })
      } else if (this.infoModal.title === '修改') {
        let data = {
          id: this.formItem.id,
          label: this.formItem.label,
          value: this.formItem.value,
          type: this.formItem.type,
          description: this.formItem.description,
          parent_id: this.formItem.parent_id
        }
        updateDict(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.init()
          } else {
            this.$Notice.error({
              title: '修改失败',
              desc: ret.data.errmsg
            })
          }
        })
      }
    },
    addType () {
      this.formItem = {}
      this.infoModal.title = '新增'
      this.infoModal.show = true
    },
    add (e) {
      this.row = e
      this.formItem = {}
      this.formItem.parent_id = e.id
      this.infoModal.title = '新增'
      this.infoModal.show = true
    },
    update (e) {
      this.row = e
      this.formItem = {}
      this.formItem = e
      this.infoModal.title = '修改'
      this.infoModal.show = true
    },
    remove (e) {
      console.log(e)
      this.row = e
      this.deleteModal = true
    },
    deleteOk () {
      let data = {
        id: this.row.id
      }
      deleteDict(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.init()
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    init () {
      findDictList().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    findList () {
      DictList().then(ret => {
        if (ret.data.errcode === 0) {
          this.list = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.findList()
  }
}
</script>

<style scoped>
  .actionBtn {
    margin-right: 5px;
    margin-bottom: 5px;
  }
</style>
